<template>
<!-- 单选按钮组 -->
    <div class="outer-input" :style="{width:`${width}`}">
    <div class="input-title">
        <span class="need" v-if="struc?.must">*</span>
        <span class="label-name">{{ struc?.viewName }}</span>
    </div>
    <div class="input-contextPackage">
      <div>
        <el-radio-group  v-model="value" @change="getRadioValue" class="radio-group-1" :disabled="Boolean(!struc?.canUpdate)">
          <el-radio-button  v-for="item in radioGroup" :key="item.value" :label="item.id">{{item.name}}</el-radio-button>
        </el-radio-group>
      </div>
      
      <div class="errorhint" v-if="showError">{{
        struc?.errorHit
      }}</div>
    </div>
    
  </div>
    
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, ref, onMounted, computed, watch } from 'vue'
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import useRequet, { RespData } from "../../hook/network"

export default defineComponent({
  type: 301,
  name: 'zRadio',
  props: {
    struc: {
      type: Object as PropType<DataStruc>,
      
    },
    passWidth: {
			type: Number
		}
  },
  setup(props, context) {
    const request = useRequet({ path: props.struc?.dataSource });
    let radioValue = reactive(props.struc as DataStruc)
    console.log(radioValue.value)
    let showError = ref(false);
    const getRadioValue = (e: string) => {
      radioValue.value = e
      console.log(e,'getRadioValue')
    }

    watch(() => props.struc?.value, (newVal, prevVal) => {
      check()
    })
    const dataCheck = useDataCheck();
    let check = () => {
      if(props.struc?.must) {
        if (props.struc?.value) {
          showError.value = false;
        } else {
          console.debug("检查出错：", showError);
          props.struc.errorHit = `请选择${props.struc.viewName}`
          showError.value = true;
        }
      }
      return !showError.value;
    };
    let radioGroup = ref([] as any)
    const req = () => {
      request.sendRequest({
        address: '',
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return resp.msg
					radioGroup.value = resp.data
          console.log(resp.data)
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return resp.msg
          
        },
        method: "GET",
      })
    }
    req()

    
    const width = computed(() => {
      return radioGroup.value.length > 3 ? '100%': props.passWidth + '%'
    })
    onMounted(() => {
      dataCheck.addDataCheck(check);
    });
    
    return {
      getRadioValue,
      ...toRefs(radioValue),
      showError,
      check,
      width,
      radioGroup
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@style/extend';
.outer-input {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  width: 33.333%;
  font-size: $fontSize-1;
  .input-title {
    padding-bottom: 10px;
    font-size:$fontSize;
    color: $regularText;
    .need {
      color: red;
    }
    .label-name {
      font-size: $fontSize-1
    }
  
  }

  .input-contextPackage {
    
    .errorhint {
      @extend .error;
      // height: 10px;
      display: block;
      // line-height: 1;
    }
  }
  
}

</style>